<template class="firstpage">
  <div>
    <div class="boxMargin">
      <el-card class="box-card">
        <el-row :gutter="20">
          <el-col :span="8">
            <el-row>
              <el-col :span="8" class="inputName">门店名称：</el-col>
              <el-col :span="14">
                <el-input v-model="searchData.storeName" placeholder="请输入门店名称" />
              </el-col>
            </el-row>
          </el-col>
          <el-col :span="8">
            <el-row>
              <el-col :span="8" class="inputName">门店编号：</el-col>
              <el-col :span="14">
                <el-input v-model="searchData.storeCode" placeholder="请输入门店编号" />
              </el-col>
            </el-row>
          </el-col>
        </el-row>
        <el-row class="margin">
          <el-col :span="24" class="right">
            <el-button type="success" @click="onSearch">查询</el-button>
            <el-button @click="onReset">清空</el-button>
          </el-col>
        </el-row>
      </el-card>
    </div>
    <div class="boxMargin">
      <el-card class="box-card">
        <div slot="header">
          <div class="contion-header" style="width:10%;">
            <span>门店列表</span>
          </div>
        </div>
        <div>
          <el-table :header-cell-style="{'background':'#f8f8f9'}" border :data="tableData" tooltip-effect="dark" style="width: 100%" @selection-change="handleSelectionChange">
            <el-table-column type="selection" width="55" />
            <el-table-column prop="imageUrl" label="门店logo">
              <template slot-scope="scope">
                <div v-if="scope.row.imageUrl != undefined && scope.row.imageUrl != null && scope.row.imageUrl != ''" class="display-img">
                  <img :src="scope.row.imageUrl" alt="" style="max-width: 100%;max-height: 100%;">
                </div>
              </template>
            </el-table-column>
            <el-table-column prop="plateSource" label="门店来源">
              <template slot-scope="scope">
                <span v-if="scope.row.plateSource === 1">城市运营</span>
                <span v-else-if="scope.row.storeStatus === 2">自营</span>
                <span v-else-if="scope.row.storeStatus === 3">租赁平台</span>
                <span v-else />
              </template>
            </el-table-column>
            <el-table-column prop="provinceName" label="省份" />
            <el-table-column prop="cityName" label="城市" />
            <el-table-column prop="storeName" label="门店名称" />
            <el-table-column prop="storeCode" label="门店编号" />
            <el-table-column prop="storeStatus" label="门店状态">
              <template slot-scope="scope">
                <span v-if="scope.row.storeStatus === 0">正常</span>
                <span v-else-if="scope.row.storeStatus === 1">休息中</span>
                <span v-else-if="scope.row.storeStatus === 2">休假中</span>
                <span v-else-if="scope.row.storeStatus === 3">网络不稳定/电话订单</span>
                <span v-else-if="scope.row.storeStatus === 4">未知状态</span>
                <span v-else />
              </template>
            </el-table-column>
            <el-table-column prop="openStatus" label="是否正在营业">
              <template slot-scope="scope">
                <span v-if="scope.row.openStatus === 0">未营业</span>
                <span v-else-if="scope.row.openStatus === 1">营业</span>
                <span v-else />
              </template>
            </el-table-column>
            <el-table-column prop="storeAddress" label="门店地址" />
            <el-table-column prop="storePhone" label="联系电话" />
          </el-table>
        </div>
      </el-card>
    </div>
    <div class="marginTop20 center">
      <template>
        <PAGER ref="wptxPager" @search="onChangePage" />
      </template>
    </div>
  </div>
</template>
<script>
import _validate from '../../../../framework/commonJs/wptx_validate'
import _tools from '../../../../framework/commonJs/wptx_tools'
// import _api from "@/framework/API/material";
import _api from '../../../../framework/API/storeItem'
import { reportingVideo } from '../../../../framework/API/excel'
import { PAGER } from '@/framework/commonTemplate/'
const _FUNCTION_NAME = ''
export default {
  components: { PAGER },
  data() {
    return {
      tableData: [],
      searchData: {
        storeName: '', // 门店名称
        storeCode: '' // 门店编号
      },
      searchDataBuffer: {
        storeName: '', // 门店名称
        storeCode: '' // 门店编号
      },
      pageData: {
        pageNo: 1,
        pageSize: 10,
        total: 1,
        pageSizes: [10, 20, 50, 100]
      },
      dialogData: {},
      historyData: {},
      infoData: {},
      customData: {
        multipleSelection: [],
        createTime: [],
        editTitle: '',
        editVideo: false,
        detailVideo: false,
        status: '',
        commodities: false,
        commoditiesDate: []
      }
      // form: {
      //     videoName:"",
      //     videoDesc:"",
      //     videoUrl:"",
      //     viewVideoUrl:"",
      //     extDomain:'',
      //     samsVideoUrl:""
      // },
      // rules: {
      //     videoName:[
      //         { required: true, message: "", trigger: "blur" },
      //     ],
      //     videoUrl:[
      //         { required: true, message: "", trigger: "blur" },
      //     ]
      // }
    }
  },
  computed: {},
  watch: {},
  created() { },
  mounted() {
    this._FUNCTION_NAME = this.$route.name
    this.onInit()
  },
  beforeDestroy() { },
  methods: {
    onInit(data) {
      const self = this
      _api.storepage(self, self.$refs.wptxPager.pageData, self.callBack_storepage, self.searchData)
    },
    onSearch() {
      const self = this
      const params = self.searchData
      self.searchDataBuffer = _tools.cloneObj(self.searchData)
      self.$refs.wptxPager.resetPageNo()
      _api.storepage(self, self.$refs.wptxPager.pageData, self.callBack_storepage, params)
    },
    onReset(data) {
      const self = this
      _tools.reset(self.searchData)
      _tools.reset(self.searchDataBuffer)
      self.customData.createTime = []
      self.onInit()
    },
    onAdd() {
      const self = this
      self.customData.editVideo = true
      self.customData.editTitle = '视频上传'
      _tools.reset(self.form)
      self.customData.status = '3'
      self.$nextTick(function() {
        self.$refs['form'].clearValidate()
      })
    },
    onInfo(data) {
      const self = this
      _tools.reset(self.form)
      self.customData.status = '1'
      _api.detail(self, data.videoId, self.callBack_detail)
    },
    onUpdate(data) {
      const self = this
      _tools.reset(self.form)
      self.customData.status = '2'
      _api.detail(self, data.videoId, self.callBack_detail)
    },
    onBathDelete() {
      const self = this
    },
    onBathUpdate() { },
    onDisable(data) {
      const self = this
    },
    onEnable(data) {
      const self = this
    },
    onUpload(data) { },
    onBathUpload() { },
    onExport(data) { },
    onDownload(data) { },
    onHistory(data) { },
    callBack_storepage(data) {
      const self = this
      if (_validate.checkEmpty(data)) {
        _validate.openTip(self, '返回数据为空', 'warning')
      } else {
        self.tableData = data.result
        self.$refs.wptxPager.updatePageData(data)
      }
    },

    handleSelectionChange(val) {
      this.customData.multipleSelection = val
    },
    // 分页
    handleSizeChange(val) {
      const self = this
      self.pageData.pageNo = 1
      self.pageData.pageSize = val
      self.commodChange()
    },
    handleCurrentChange(val) {
      const self = this
      self.pageData.pageNo = val
      self.commodChange()
    }
  }
}
</script>
<style scoped>
.contion-header {
    display: inline-block;
    box-sizing: border-box;
}
.text-r {
    text-align: right;
}
.dece{
    line-height: 20px;
    margin-top: 20px;
}
.dece p{
    padding: 0;
    margin: 0;
    color: #D9001B;
}
.display-img{
    width: 50px;
    height: 50px;
    border-radius: 6px;
    text-align: center;

}
</style>
